<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/zzsc.css">
    <link rel="stylesheet" type="text/css" href="dist/jquery.vm-carousel.css2.css">
    <script src="js/modernizr.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/listen.css"/>
    <link rel="stylesheet" type="text/css" href="css/login.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.css"/>
    <title>随心听</title>



</head>
<style>
        	  .vmc-centered{ padding: 10px 0; }
	  .vmc-centered img { transition: all 0.3s ease; }
      .vmc-centered .vmc_active img { transform: scale(1); }
      .container{

              width: 100%;
      }
      .container .imgbox{
            width:120%;
      }
      .container .imgbox li{
            border-radius: 15px;
            width:50%;
      }
      .container .imgbox li img{
        border-radius: 15px;
        width:95%;
      }
</style>



<body>
                <div class="main"><!--考虑到兼容问题，这里不能main标签,因为它会和定位冲突-->

                        <header>
                                <section><img src="img/logo.jpg"></section>
                                <nav class="btn_nav">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                </nav>
                                 <ul class="phone_nav">
                                        <li><a href="index.html">主页</a></li>
                                        <li><a href="featurn.html">特色推荐</a></li>
                                        <li><a href="listen.html">随心听</a></li>
                                        <li><a href="freedom.html">自由行</a></li>
                                        <li><a href="aboutus.html">关于我们</a></li>
                                        <li class="login_btn"><a>登录/注册</a></li>
                                 </ul>   
                        </header>
                        <div class="phone_title">
                                <header>
                                        <img src="img/l_title.png">
                                </header>
                                <P>实时定位，自动播放，<br>
                                   解放双手，边走边听<br>
                                   <span>更全面的功能，尽在APP中</span></P>
                        </div>
                        <article class="content">
                                <section>
                                        <header>
                                                <img src="img/l_title.jpg">
                                        </header>
                                        <P>实时定位，自动播放，解放双手，边走边听<br>
                                         <span>更全面的功能，尽在APP中</span></P>
                                         <div class="container">
                                                        <ul class="vmcarousel-centered vmc-centered imgbox">
                                                                <li><img src="img/l1.png" alt=""></li>
                                                                <li><img src="img/l2.jpg" alt=""></li>
                                                                <li><img src="img/l3.jpg" alt=""></li>
                                                                <li><img src="img/l4.jpg" alt=""></li>
                                                                <li><img src="img/l5.jpg" alt=""></li>
                                                                <li><img src="img/l6.jpg" alt=""></li>
                                                        </ul>
                                        </div>
                                         <div class="btnn">
                                                 <span class="l_btn"><img src="img/llbtn.png"></span>
                                                 <span class="r_btn"><img src="img/rrbtn.png"></span>
                                         </div>
                                         <div class="btn2">
                                                        <span class="l_btn2"><img src="img/llbtn.png"></span>
                                                        <span class="r_btn2"><img src="img/rrbtn.png"></span>
                                        </div>
                                        <ul class="l_ulA">
                                                <li><img src="img/l1.png"><div></div><span><img class="A" src="img/l_play.png"></span></li>
                                                <li><img src="img/l2.jpg"><div></div><span><img class="A" src="img/l_play.png"></span></li>
                                                <li><img src="img/l3.jpg"><div></div><span><img class="A" src="img/l_play.png"></span></li>
                                        </ul>   
                                        <ul class="l_ulB">
                                                <li><img src="img/l4.jpg"><div></div><span><img class="A" src="img/l_play.png"></span></li>
                                                <li><img src="img/l5.jpg"><div></div><span><img class="A" src="img/l_play.png"></span></li>
                                                <li><img src="img/l6.jpg"><div></div><span><img class="A" src="img/l_play.png"></span></li>
                                        </ul>  
                                
                                                  
                                </section>
                      
                        </article>
                        <p>岭南印象园APP   联系电话：400-511-3420</p>
                    </div>
<!--login-->
<article class="login">
                <section>
                        <article class="logo">
                                <img src="img/bigLogo.png">
                        </article>
                </section>
                <aside>
                    <div class="btn">
                            <span class="dlbtn">登录</span><span class="zcbtn">注册</span>
                    </div>
                    <form class="login_form">
                            <input type="type" placeholder="用户名"/>
                            <input type="type" placeholder="密码"/>
                            <span>忘记密码？</span>
                            <button>登录</button>
                    </form>
                    <form class="register">
                            <input type="type" placeholder="用户名"/>
                            <input type="type" placeholder="密码"/>
                            <input type="type" placeholder="密码"/>
                            <button>注册</button>
                    </form>
                    <ul>
                        <li><img src="img/qq.png"></li>
                        <li><img src="img/wechat.png"></li>
                        <li><img src="img/weibo.png"></li>
                    </ul>

                     <span class="close"><img src="img/close.png"></span>   
                </aside>
</article><!--login-->

</body>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="dist/jquery.vm-carousel.js"></script>
<script src="js/response.js"></script>
<script src="js/nav.js"></script>
<script>
            	jQuery(function($){
		  $('.vmcarousel-centered').vmcarousel({
			 centered: true,
			 start_item: 2,
			 autoplay: false,
			 infinite: false
		  });

		  $('.vmcarousel-centered-infitine').vmcarousel({
			 centered: true,
			 start_item: 1,
			 autoplay: false,
			 infinite: true
		  });

		  $('.vmcarousel-normal').vmcarousel({
			 centered: false,
			 start_item: 0,
			 autoplay: false,
			 infinite: false
		  });
	   });
        var l_btn = document.querySelector(".l_btn");
        var r_btn = document.querySelector(".r_btn");
        var l_ulA = document.querySelector(".l_ulA");
        var l_ulB = document.querySelector(".l_ulB");

        l_btn.addEventListener("click",function(){
                l_ulA.style.display = "none";
                l_ulB.style.display = "flex";
        })
        r_btn.addEventListener("click",function(){
                l_ulA.style.display = "flex";
                l_ulB.style.display = "none";
        })
   
        
        var play = document.querySelectorAll(".A");
        var arr = ["img/l_play.png","img/pau.png"];
        var isplay = true;
       for(let i=0; i<play.length;i++){
              
                       
               
                play[i].addEventListener("click",function(){
                       
                //        span[2].children.src = arr[1];
                        if(isplay){
                                play[i].src = arr[1];  
                                isplay=false;
                        }else{
                                play[i].src = arr[0];
                                isplay=true;
                        }
               })
       }
</script>
</html>